<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      width="95%">
      <el-tabs type="border-card" v-model="activeTab" @tab-click="onTabClick" >
        <el-tab-pane label="基础信息" name="detailBasic">
          <detail-basic :detailBasic="detailBasic" />
        </el-tab-pane>
        <el-tab-pane label="缴费信息" name="payInfo">
          <pay-info :payInfo="payInfo" />
        </el-tab-pane>

        <el-tab-pane label="项目信息" name="productInfo">
          <product-info :productInfo="productInfo" />
        </el-tab-pane>

        <el-tab-pane label="样本信息" name="sampleInfo">
          <sample-info :sampleInfo="sampleInfo" />
        </el-tab-pane>

        <el-tab-pane label="样本结果" name="sampleResult">
          <sample-result :sampleResult="sampleResult" />
        </el-tab-pane>

      </el-tabs>
    </el-dialog>

  </div>
</template>

<script>
import { getHcMainOrder } from "@/api/systemIntegration/hcMainOrder";
import detailBasic from "./detailBasic";
import payInfo from "./payInfo";
import productInfo from "./productInfo";
import sampleInfo from "./sampleInfo";
import sampleResult from "./sampleResult";

export default {
  name:"",
  components: {detailBasic,payInfo,productInfo,sampleInfo,sampleResult},
  data () {
    return {
      detailBasic: {},
      payInfo: {},
      productInfo: {},
      sampleInfo: [],
      sampleResult: [],
      visible: false,
      activeTab: "detailBasic",
      form:{
        id:"",
      }
    };
  },
  activated() {
    this.handleClick({ name: this.activeTab });
  },
  created() {
    const tab = this.$route.query.tab;
    if (tab) {
      this.onTabClick({ name: tab });
    } else {
      this.onTabClick({ name: "detailBasic" });
    }
  },
  methods: {
    onTabClick (tab,event) {
      this.$router.push({
        query: {
          tab: tab.name,
        },
      });
      this.activeTab = tab.name;
    },
    show (row) {
      this.form.id = row.id;
      this.getBasicData();
    },
    async getBasicData() {
      if(this.form.id!=null) {
        let response = await getHcMainOrder(this.form.id);
        if (response.code == '200') {
          this.detailBasic = response.data.detailBasic;
          this.payInfo = response.data.payInfo;
          this.productInfo = response.data.productInfo;
          this.sampleInfo = response.data.sampleInfo;
          this.sampleResult = response.data.sampleResult;
          this.visible = true;
        }
      }
    }
  }

};
</script>

<style lang="scss" scoped>
.detail {
  height: 100%;
  overflow: hidden;
  .el-row {
    // padding: 20px;
    height: 100%;
    .el-col-5 {
      .box-card {
        width: 100%;
        height: calc(100vh - 100px);
        h4 {
          margin: 0px;
          font-size: 20px;
          font-family: Source Code Pro-Bold, Source Code Pro;
          font-weight: bold;
          color: #1f2329;
          margin-bottom: 10px;
        }
      }
    }
  }
  ::v-deep.el-table .el-table__cell {
    padding: 0;
  }
  ::v-deep.el-table--medium .el-table__cell {
    padding: 0;
  }
  .infor {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 12px 0;
    p {
      display: flex;
      margin: 0;
      flex: wrap;
      width: 33%;
      font-weight: bold;
      font-size: 14px;
      font-weight: 600;
      color: #828282;
      line-height: 32px;
      > span {
        font-size: 14px;
        font-family: Source Code Pro-Regular, Source Code Pro;
        font-weight: 400;
        color: #1f2329;
        min-width: 50px;
        margin-right: 10px;
      }
      // p {
      //   margin: 3px 0;
      // }
    }
  }
  .btn {
    display: flex;
    overflow: auto;
    padding: 0 0 10px 0;
  }
  .box1 {
    border-bottom: 1px solid #e7e3e3;
    .txt {
      display: flex;
      height: 30px;
      align-items: center;
      p {
        color: #8c8c8c;
        margin: 6px 0;
        font-size: 14px;
        white-space: nowrap;
        margin-right: 10px;
      }
      > span {
        min-width: 100px; /* 定义文本容器的宽度 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
      }
    }
  }

  .active {
    background: #aa2290;
    color: #fff;
  }
}

::v-deep.el-card__body {
  //spadding: 20px;
}
</style>
